<template>
	<view class="content">
		<!-- 搜索 -->
		<div class="search">
			<div class="sear">
				<img src="https://img.wawachina.cn/xcx/images/se.png" alt="">
				<input type="text" placeholder="请输入搜索内容">
			</div>
			<div class="classify">
				<img src="https://img.wawachina.cn/xcx/images/jd_4.jpg" alt="">
				<span>分类</span>
			</div>
		</div>
		<!-- 轮播图 -->
		<swiper autoplay indicator-dots circular>
			<swiper-item v-for="(item,index) in bannerlist" :key="index">
				<navigator :url="item.route">
					<img :src="item.img" alt="" mode="widthFix" />
				</navigator>
			</swiper-item>
		</swiper>
		<!-- VIP -->
		<div class="vip_box">
			<img src="http://img.wawachina.cn/xcx/images/vid_1.jpg" alt="">
			<div class="right">
				<div>{{vipinfolist.title}} {{vipinfolist.subTitle}}</div>
				<img src="http://img.wawachina.cn/xcx/images/vid_7.png" alt="">
			</div>
		</div>
		<!-- 孩子问题 和 精读课推荐 -->
		<div class="child_box">
			<!-- 孩子问题 -->
			<div class="child_question">
				<div class="child_question_top">
					<div>孩子有这些问题怎么办？</div>
					<div>更多></div>
				</div>
				<div class="child_question_bot">
					<div v-for="item in childquestionlist" :key="item.id">
						<img :src="item.pic" alt="">
					</div>
				</div>
			</div>
			<!-- 精读课推荐 -->
			<div class="intensiveread">
				<div class="intensiveread_top">
					<div>精读课推荐</div>
				</div>
				<div class="intensiveread_bot">
					<div class="interbot_lis">
						<div v-for="item1 in latestVideoslist" :key="item1.id">
							<img :src="item1.cover" alt="">
							<span>{{item1.title}}</span>
						</div>
					</div>
					<div class="interbot_btn">
						<div @click="gochange()"><img src="http://img.wawachina.cn/xcx/images/vid_8.png" alt="">换一换</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 后面所有的一个大盒子 -->
		<div class="bogboxlist">
			<div class="bigbox">
				<div class="classifylis" v-for="item2 in itemslist" :key="item2.categoryId">
					<div class="classifylis_top">
						<div>{{item2.name}}</div>
						<div>更多></div>
					</div>
					<!-- {{item2.datas}} -->
					<div class="classifylis_bot">
						<div v-for="(it) in item2.datas" :key="it.id" class="class_item">
							<img :src="it.cover" alt=""	class="class_item_img" >
							<span>{{it.title}}</span>
							<!-- 详情描述 -->
							<div>{{it.desp}}</div>
							<span class="playcount">{{it.playCount}}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
import {gitPerusalList , getChangeList} from "@/service";
	export default {
		data() {
			return {
				bannerlist:[],
				vipinfolist:[],
				childquestionlist:[],
				latestVideoslist:[],
				itemslist:[],
				num:0
			}
		},
		onLoad() {

		},
		async onShow() {
			var result = await gitPerusalList();
			// console.log(result);
			if(result){
				//轮播图数据
				this.bannerlist=result.ads
				// vip字段数据
				this.vipinfolist=result.vipInfo
				//孩子问题图片数据
				this.childquestionlist=result.qaItems
				//精读课推荐数据
				this.latestVideoslist=result.latestVideos
				// console.log(this.latestVideoslist);
				//分类标题
				this.itemslist=result.items
				// console.log(this.itemslist[tabIndex].datas);
			}
		},
		methods: {
			async gochange(){
				var result = await getChangeList();
				console.log(result);
				this.num = this.num+=6;
				this.latestVideoslist=result.latestVideos;
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: rgb(247,247,247);
		.search{
			width: 100%;
			height: 110rpx;
			display: flex;
			align-items: center;
			background: #fff;
			.sear{
				width: 560rpx;
				border: 1px solid rgb(230,229,234);
				height: 60rpx;
				margin-left: 18rpx;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				>img{
					width: 30rpx;
					height: 30rpx;
					margin-left: 20rpx;
				}
				>input{
					padding-left: 10rpx;
					font-size: 14px;
				}
			}
			.classify{
				width: 140rp;
				border: 1px solid rgb(230,229,234);
				height: 60rpx;
				margin-left: 18rpx;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				padding: 0 22rpx;
				>img{
					width: 22rpx;
					height: 22rpx;
					margin-right: 10rpx;
					color: rgb(75,75,75);
					// margin: 0 10rpx 0 16rpx;
				}
				>span{
					font-size: 14px;
				}
			}
		}
		swiper{
			width: 100%;
			height: 310rpx;
			background: #fff;
				img{
					width: 100%;
					height: 310rpx;
				}
		}
		.vip_box{
			width: 100%;
			height: 110rpx;
			display: flex;
			align-items: center;
			background: #fff;
			>img{
				width: 50rpx;
				height: 34rpx;
				margin: 4rpx 14rpx 0 20rpx;
			}
			.right{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 640rpx;
				>img{
					width: 16rpx;
					height: 20rpx;
				}
			}
		}
		.child_box{
			width: 100%;
			display: flex;
			flex-direction: column;
			margin-top: 20rpx;
			background: rgb(255,255,255);
			.child_question{
				width: 100%;
				height: 300rpx;
				display: flex;
				flex-direction: column;
				.child_question_top{
					width: 100%;
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					>div:nth-child(1){
						font-size: 14px;
						margin-left: 20rpx;
					}
					>div:nth-child(2){
						margin-right: 30rpx;
						font-size: 12px;
						color: rgb(255,199,99);
					}
				}
				.child_question_bot{
					width: 94%;
					margin: 0 auto;
					height: 160rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					>div{
						width: 220rpx;
						height: 160rpx;
						>img{
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
		.intensiveread{
			width: 100%;
			height: 730rpx;
			display: flex;
			flex-direction: column;
			margin-left: 20rpx;
			.intensiveread_top{
				width: 100%;
				height: 80rpx;
				display: flex;
				align-items: center;
				>div{
					line-height: 30rpx;
					border-left: 3px solid rgb(255,93,67);
					padding-left: 16rpx;
				}
			}
			.intensiveread_bot{
				height: 750rpx;
				width: 100%;
				.interbot_lis{
					width: 90%;margin-left: 3%;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					>div{
						width: 210rpx;
						height: 260rpx;
						display: flex;
						flex-direction: column;align-items: center;
						justify-content: space-around;
						>img{
							width: 210rpx;
							height: 190rpx;
						}
						>span{
							font-size: 14px;
						}
					}
				}
				.interbot_btn{
					height: 150rpx;
					width: 90%;
					margin-left: 3%;
					display: flex;
					align-items: center;
					justify-content: center;
					>div{
						width: 470rpx;
						height: 70rpx;
						background: rgb(245,245,245);
						font-size: 14px;
						display: flex;
						align-items: center;
						justify-content: center;
						>img{
							width: 24rpx;
							height: 24rpx;
							margin-right: 10rpx;
						}
					}
				}
			}
		}
		.bogboxlist{
			width: 100%;
			margin-top: 20rpx;
			background: #fff;
			.bigbox{
				display: flex;
				flex-direction: column;
				width: 94%;
				margin: 0 auto;
				.classifylis{
					display: flex;
					flex-direction: column;
					margin-bottom: 30rpx;
					.classifylis_top{
						width: 100%;
						height: 70rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 20rpx;
						>div:nth-child(1){
							line-height: 30rpx;
							border-left: 3px solid rgb(255,93,67);
							padding-left: 16rpx;
						}
						>div:nth-child(2){
							font-size: 12px;
							color: rgb(255,199,99);
						}
					}
					.classifylis_bot{
						display: flex;
					}
				}
				.classifylis:nth-child(1) .classifylis_bot{
					display: flex;
					justify-content: space-between;
					.class_item{
						width: 230rpx;
						height: 360rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: space-between;
						z-index: 100;
						position: relative;
						.playcount{
							color: #fff;
							font-size:12px;
							-webkit-transform: scale(0.70);
							position: absolute;
							right: 16rpx;
							bottom: 70rpx;
							
						}
						.class_item_img{
							width: 230rpx;
							height: 310rpx;
							border-radius: 20rpx;
						}
						>span{
							font-size: 14px;
						}
						>div{
							display: none;
						}
					}
					.class_item:nth-child(2){
						z-index: 0;
						.class_item_img{
							width: 285rpx ;
							height: 310rpx;
							border-radius:60rpx;
						}
					}
				}
				.classifylis:nth-child(2) .classifylis_bot{
					display: flex;
					justify-content: space-between;
					.class_item{
						width: 230rpx;
						height: 360rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: space-between;
						z-index: 100;
						position: relative;
						.playcount{
							color: #fff;
							font-size:12px;
							-webkit-transform: scale(0.70);
							position: absolute;
							right: 16rpx;
							bottom: 70rpx;
							
						}
						.class_item_img{
							width: 230rpx;
							height: 310rpx;
							border-radius: 20rpx;
							
						}
						>span{
							font-size: 14px;
						}
						>div{
							display: none;
						}
					}
					.class_item:nth-child(2){
						z-index: 0;
						.class_item_img{
							width: 285rpx ;
							height: 310rpx;
							border-radius:60rpx;
						}
					}
				}
				.classifylis:nth-child(3) .classifylis_bot{
					display: flex;
					justify-content: space-between;
					.class_item{
						width: 340rpx;
						height: 430rpx;
						display: flex;
						flex-direction: column;
						position: relative;
						.playcount{
							font-size:12px;
							-webkit-transform: scale(0.70);
							position: absolute;
							right: 16rpx;
							bottom: 100rpx;
							color: #fff;
						}
						.class_item_img{
							width: 340rpx;
							height: 370rpx;
							border-radius: 20rpx;
						}
						>span{
							font-size: 14px;
							line-height: 40rpx;
							margin-top: 14rpx;
							color: rgb(43,43,43);
						}
						>div{
							font-size: 12px;
							color: rgb(166,166,166);
							height: 40rpx;
							overflow: hidden;
						}
					}
				}
				.classifylis:nth-child(4) .classifylis_bot{
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					.class_item{
						width: 330rpx;
						height: 300rpx;
						display: flex;
						flex-direction: column;
						margin-bottom: 20rpx;
						// position: relative;
						.playcount{
							display: none;
						}
						.class_item_img{
							width: 100%;
							height: 200rpx;
							border-radius: 20rpx;
						}
						>span{
							font-size: 14px;
							line-height: 40rpx;
							margin-top: 14rpx;
							color: rgb(43,43,43);
						}
						>div{
							font-size: 12px;
							color: rgb(166,166,166);
							height: 40rpx;
							overflow: hidden;
						}
					}
				}
				.classifylis:nth-child(5) .classifylis_bot{
					display: flex;
					justify-content: space-between;
					.class_item{
						width: 340rpx;
						height: 400rpx;
						display: flex;
						flex-direction: column;
						position: relative;
						.playcount{
							color: #fff;
							font-size:12px;
							-webkit-transform: scale(0.70);
							position: absolute;
							right: 16rpx;
							bottom: 90rpx;
						}
						.class_item_img{
							width: 100%;
							height: 390rpx;
							border-radius: 20rpx;
						}
						>span{
							font-size: 14px;
							line-height: 40rpx;
							margin-top: 14rpx;
							color: rgb(43,43,43);
						}
						>div{
							font-size: 12px;
							color: rgb(166,166,166);
							height: 40rpx;
							overflow: hidden;
						}
					}
				}
				.classifylis:nth-child(6) .classifylis_bot{
					display: flex;
					justify-content: space-between;
					.class_item{
						width: 228rpx;
						height: 400rpx;
						display: flex;
						flex-direction: column;
						position: relative;
						.playcount{
							color: #fff;
							font-size:12px;
							-webkit-transform: scale(0.70);
							position: absolute;
							left: 140rpx;
							bottom: 110rpx;
						}
						.class_item_img{
							width: 100%;
							height: 300rpx;
							border-radius: 20rpx;
						}
						>span{
							font-size: 14px;
							width: 228rpx;
							height: 40rpx;
							margin-top: 14rpx;
							color: rgb(43,43,43);
							overflow: hidden;
						}
						>div{
							display: none;
						}
					}
				}
				.classifylis:nth-child(7) .classifylis_bot{
					display: flex;
					justify-content: space-between;
					.class_item{
						width: 332rpx;
						height: 440rpx;
						display: flex;
						flex-direction: column;
						position: relative;
						.playcount{
							color: #fff;
							font-size:12px;
							-webkit-transform: scale(0.70);
							position: absolute;
							right: 16rpx;
							bottom: 100rpx;
						}
						.class_item_img{
							width: 100%;
							height: 370rpx;
							border-radius: 20rpx;
						}
						>span{
							font-size: 14px;
							line-height: 40rpx;
							margin-top: 14rpx;
							color: rgb(43,43,43);
						}
						>div{
							font-size: 12px;
							color: rgb(166,166,166);
							height: 40rpx;
							overflow: hidden;
						}
					}
				}
				.classifylis:nth-child(8) .classifylis_bot{
					display: flex;
					justify-content: space-between;
					.class_item{
						width: 332rpx;
						height: 440rpx;
						display: flex;
						flex-direction: column;
						position: relative;
						.playcount{
							color: #fff;
							font-size:12px;
							-webkit-transform: scale(0.70);
							position: absolute;
							right: 16rpx;
							bottom: 100rpx;
						}
						.class_item_img{
							width: 100%;
							height: 370rpx;
							border-radius: 20rpx;
						}
						>span{
							font-size: 14px;
							line-height: 40rpx;
							margin-top: 14rpx;
							color: rgb(43,43,43);
						}
						>div{
							font-size: 12px;
							color: rgb(166,166,166);
							height: 40rpx;
							overflow: hidden;
						}
					}
				}
				.classifylis:nth-child(9) .classifylis_bot{
					display: flex;
					justify-content: space-between;
					.class_item{
						width: 332rpx;
						height: 440rpx;
						display: flex;
						flex-direction: column;
						position: relative;
						.playcount{
							color: #fff;
							font-size:12px;
							-webkit-transform: scale(0.70);
							position: absolute;
							right: 16rpx;
							bottom: 100rpx;
						}
						.class_item_img{
							width: 100%;
							height: 370rpx;
							border-radius: 20rpx;
						}
						>span{
							font-size: 14px;
							line-height: 40rpx;
							margin-top: 14rpx;
							color: rgb(43,43,43);
						}
						>div{
							font-size: 12px;
							color: rgb(166,166,166);
							height: 40rpx;
							overflow: hidden;
						}
					}
				}
				.classifylis:nth-child(10) .classifylis_bot{
					display: flex;
					justify-content: space-between;
					.class_item{
						width: 332rpx;
						height: 440rpx;
						display: flex;
						flex-direction: column;
						position: relative;
						.playcount{
							color: #fff;
							font-size:12px;
							-webkit-transform: scale(0.70);
							position: absolute;
							right: 16rpx;
							bottom: 100rpx;
						}
						.class_item_img{
							width: 100%;
							height: 370rpx;
							border-radius: 20rpx;
						}
						>span{
							font-size: 14px;
							line-height: 40rpx;
							margin-top: 14rpx;
							color: rgb(43,43,43);
						}
						>div{
							font-size: 12px;
							color: rgb(166,166,166);
							height: 40rpx;
							overflow: hidden;
						}
					}
				}
				.classifylis:nth-child(11) .classifylis_bot{
					display: flex;
					justify-content: space-between;
					.class_item{
						width: 332rpx;
						height: 440rpx;
						display: flex;
						flex-direction: column;
						position: relative;
						.playcount{
							color: #fff;
							font-size:12px;
							-webkit-transform: scale(0.70);
							position: absolute;
							right: 16rpx;
							bottom: 100rpx;
						}
						.class_item_img{
							width: 100%;
							height: 370rpx;
							border-radius: 20rpx;
						}
						>span{
							font-size: 14px;
							line-height: 40rpx;
							margin-top: 14rpx;
							color: rgb(43,43,43);
						}
						>div{
							font-size: 12px;
							color: rgb(166,166,166);
							height: 40rpx;
							overflow: hidden;
						}
					}
				}
			}
		}
	}

</style>
